<template>
    <div class="box_header">
        <div class="box_header_left">
            <span @click="outScreen">
                首页
            </span>
        </div>
        <div class="box_header_main">
            智慧旅游可视化大数据平台
        </div>
        <div class="box_header_right">
            <span>
                统计报告
            </span>
        </div>
    </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router';
const $router = useRouter()
const outScreen = () => {
    $router.push('/')
}
</script>
<script lang="ts">
export default {
    name: 'Header'
}
</script>
<style scoped lang="scss">
.box_header {
    display: flex;

    .box_header_left,
    .box_header_right {
        height: 100%;
        width: 25%;
        background: url("../../images/dataScreen-header-left-bg.png") no-repeat;
        background-size: 100% 100%;

        span {
            height: 40px;
            width: 150px;
            background-size: 100% 100%;
            text-align: center;
            line-height: 40px;
            font-size: 20px;
            cursor: pointer;
        }

    }

    .box_header_left {
        span {
            float: right;
            background: url('../../images/dataScreen-header-btn-bg-l.png') no-repeat;

        }
    }

    .box_header_right {
        span {
            float: left;
            background: url('../../images/dataScreen-header-btn-bg-r.png') no-repeat;

        }
    }

    .box_header_main {
        flex: 1;
        height: 74px;
        background: url(../../images/dataScreen-header-center-bg.png) no-repeat;
        background-size: 100% 100%;
        font-size: 30px;
        font-weight: bolder;
        letter-spacing: 2px;
        line-height: 74px;
        text-align: center;

    }
}
</style>